<template>
  <div class="jczl-menu-v2">
    <Menu theme="light" width="auto" style="height: calc(100vh - 200px);"  @on-select="clickMenu">
      <template v-for="(item, index) in siderMenus">
        <Submenu :name="JSON.stringify(item)" v-show="item.list && item.list.length >= 1" :key="index">
            <template slot="title" v-if="item.list && item.list.length >= 1">
                <Icon :type="item.icon"/>
                {{ item.name }}
            </template>
            <template v-if="item.list && item.list.length >= 1" v-for="item1 in item.list">
                <template v-if="item1.list && item1.list.length >= 1">
                    <Submenu :name="JSON.stringify(item1)" :key="item1.type_id" v-show="!item1.hidden">
                        <template slot="title">
                            <Icon :type="item1.icon"/>
                            {{item1.name}}
                        </template>
                        <MenuItem :name="item2.path" v-if="item2.path"  v-for="item2 in item1.list"
                                  v-show="!item2.hidden"
                                  :key="item2.type_id"
                                  :class="item2.audit_state_yingshang == '1' ? 'mz-gray' : ''">
                            <Icon :type="item2.icon"/>
                            {{item2.name}}
                        </MenuItem>
                    </Submenu>
                </template>
                <MenuItem :name="item1.path" v-else :key="item1.type_id" v-show="!item1.hidden"
                          :class="item1.audit_state_yingshang == '1' ? 'mz-gray' : ''">
                    <Icon :type="item1.icon" :key="item1.type_id"/>
                    {{item1.name}}
                </MenuItem>
            </template>
        </Submenu>
        <MenuItem :name="item.path" v-if="!item.list && item.path" :key="item.type_id" v-show="!item.hidden"
                  :class="item.audit_state_yingshang == '1' ? 'mz-gray' : ''">
            <Icon :type="item.icon" :key="item.type_id"/>
            {{item.name}}
        </MenuItem>
      </template>
      <!-- <div v-for="(item, index) in minZhengMenus2" v-bind:key="index">
        <Submenu :name="item.name">
          <template slot="title">
              <Icon :type="item.icon"></Icon>
              {{item.name}}
          </template>
          <div v-for="(item1, index1) in item.list" v-bind:key="index1">
            <MenuItem :name="item1.path">
              <Icon :type="item1.icon"></Icon>
              <span>{{item1.name}}</span>
            </MenuItem>
          </div>
        </Submenu>
      </div> -->
    </Menu>
  </div>
</template>
<script>
import '../index-copy.less'
export default {
  name: 'qstb-menu',
  data () {
    return {}
  },
  props: {
    siderMenus: {
      type: Array,
      default () {
        return []
      }
    }
  },
  components: {},
  computed: {
    menuitemClasses: function () {
      return [
        'menu-item',
        this.isCollapsed ? 'collapsed-menu' : ''
      ]
    }
  },
  watch: {},
  mounted () {},
  methods: {
    clickMenu (item) {
      console.log(item, '%%%%%%')
      this.$router.push({
        path: item
      })
    }
  }
}
</script>
<style scoped>
</style>
